<template>
	<view>
	<!-- <scroll-view scrolltolower="onReachBottom"> -->
		<view>
			<view  class="v1">{{ContentList.title}}</view>
			<view class="author">
				<view class="author-img">
					<!-- 头像 -->
					 <u-avatar src="/static/img/logo.b3a48c0.png" size="40" ></u-avatar>
				 </view>
				<view  class="author-right">
					<view class="author-infomation" >{{ContentList.author}}</view>
					<view class="author-rigjt-bottom">
						<view style="display: flex;"><u-icon name="chat-fill" /><view>{{ContentList.commentCounts}}</view></view>
						<view style="display: flex;"><u-icon name="eye-fill" /><view>{{ContentList.viewCounts}}</view></view>
						<view style="display: flex;"><u-icon name="clock-fill" /><view>{{ContentList.createDate}}</view></view>
					</view>
				</view>
			</view>
			
			<view class="view-article">
				<!-- <view>{{ContentList.summary}}</view> -->
			    <view>{{ContentList.body.content}}</view>
			</view>
			
			<view class="u-page">
			    <view class="u-demo-block">
			      <view class="u-demo-block__content">
			        <view class="album">
			          <view class="album__content">
			            <u-album :urls="urls2" rowCount=4></u-album>
			          </view>
			        </view>
			      </view>
			    </view>
			</view>
			<view style="height: 20px;"></view>
			
			<view class="introduce">
				<view class="introduce-tags">标签：<view v-for="(item,i) in TagLIst" :key="i"  class="v-w">{{item.tagName}}</view></view>
				
				<view style="height: 8px;"></view>
				
				<view class="introduce-category">文章分类：
				    <view class="v-w">{{ContentList.category.categoryName}}</view>
				</view>
			</view>
		</view>
		
		<view style="height: 10px;"></view>
		
		<view class="input-container">
			<u--input
			    placeholder="请输入评论"
			    border="surround"
			    v-model="comment"
			  >
			  </u--input>
			  <button class="button-next" @click="setComment()" >评论</button>
		</view>
		<u-line color="#2979ff" dashed></u-line>
		
		<view >
			<view v-for="(item,i) in Comment" :key="i" class="comment" ref="item.id">
				<view class="comment-left">
					<u-avatar :src="item.author.avatar" size="40" ></u-avatar>
				</view>
				<view class="comment-right" @click="commentReply(item.author.nickname,item.author.id)">
					<view class="comment-rightr-infomation" >{{item.author.nickname}}</view>
					<view class="comment-rightr-content">
						{{item.content}}
					</view>
					<view class="comment-right-bottom">
						<view style="display: flex;"><u-icon name="clock-fill" /><view>{{item.createDate}}</view></view>
						<u-line color="#f0f6ff" ></u-line>
					</view>
				</view>
			</view>
		</view>
		
		<u-popup :show="checkT" mode="bottom"  :closeable="true" @close="this.checkT=false" :round="10" >
			<view style="height: 30px;">
				<view style="font-weight: 600;margin-top: 10px;">@--{{rofname}}</view>
			</view>
			<view class="input-container">
				<u--input
				    placeholder="请输入评论"
				    border="bottom"
				    v-model="comment"
					clearable
				  >
				  
				  </u--input>
				  <button class="button-nex" @click="setComment()" >评论</button>
			</view>
		</u-popup>
	<!-- </scroll-view>	 -->
	</view>
</template>
<!-- http://s51kk3bte.hn-bkt.clouddn.com/c0886792-a40e-436a-9a56-ede4eceff8c9.png   http://s51kk3bte.hn-bkt.clouddn.com/a3401e1f-f1f3-45f6-b7d7-b9e849ca191a.png-->
<script>
	export default {
		data() {
			return {
				ContentList:'',
				TagLIst:[],
				comment:'',
				Comment:[],
				checkT:false,
				rofname:'',
				rofnameid:'',
				albumWidth: 0,
				urls2: []
			};
		},
		onLoad(option) { 
			const id = JSON.parse(decodeURIComponent(option.id));
			console.log(id);
			this.getView(id)
			this.getComment(id)
		},
		methods:{
			commentReply(name,id){
				this.checkT=true;
				this.rofname=name
				this.rofnameid=id
				this.comment=null
			},
			 async getView(id){
				uni.setStorageSync('wenid',id)
				console.log(id) 
				const  { data : res} =await uni.$http.post(`/articles/view/${id}`)
				if(res.code!==200) return uni.$showMsg()
				this.ContentList=res.data
				this.TagLIst=res.data.tags
				if(res.data.body.contentHtml!==null){
					this.urls2=res.data.body.contentHtml.split('@');
				}
				console.log(this.urls2);
				console.log(res);
				// .then((res) => {
				//     // 处理成功响应  
				//     console.log(res); // 打印返回的数据  
				// })
			},
			async getComment(id){
				const { data : res} =await uni.$http.get(`/comments/article/${id}`)
				if(res.code!==200) return uni.$showMsg()
				this.Comment=res.data
				console.log("------------------------");
				console.log(res);
			},
			async setComment(){
				var content=this.comment
				var id3=null
				if(this.rofname!==""){
					id3=this.rofnameid
					content="@"+this.rofname+" : "+content
				}
				// console.log(id3);
				const id1=uni.getStorageSync('id')
				const id2=uni.getStorageSync('wenid')
				const {data:res }=await uni.$http.post(`/comments/create/change`,{
					articleId:id2,
					content:content,
					parent:id3,
					toUserId:id1,
					
				})
				console.log(res);
				if(res.code!==200) return uni.$showMsg()
				this.rofname=null
				this.comment=null
				this.checkT=false;
				this.getComment(id2)
			}
		}
	}
</script>

<style lang="scss">
.v-flex{
	display: flex;
	justify-content: flex-start;
}
.v1{
	text-align: center;
	// text-shadow:black 4px 4px 5px;
	font-size: 50rpx;
	font-weight: 900;
}
.v-w{
	// margin-left: 5px;  
	// margin-right: 5px;
	width:fit-content;
	height: auto;
    border-radius: 8rpx;
	background: #99a9bf;
	text-align: center;
}
.view-article{
	  width: 90%; /* 设置框的宽度 */  
	  margin: 0 auto; /* 设置框的水平位置居中 */  
	  background-color: #f0f0f0; /* 设置框的背景颜色 */  
	  border: 1px solid #ddd; /* 设置框的边框 */  
	  padding: 20px; /* 设置框的内边距 */
	  border-radius: 20px;
}
.input-container {  
  display: flex; 
  // margin-bottom: 20px;
  // align-items: center; 
}  
  
.button-next {  
  margin-left: 10px; /* 根据需要调整按钮与输入框之间的间距 */
} 
.button-nex{
	background-color: transparent;
	   border: none;
	   outline: none;
	   color: #55aa00;
	   font-size: 14px;
}
.author{
	display: flex;
	position: relative;
	.author-img{
		margin: 10px;
	}
	.author-right{
		width: 210px;
		margin-top: 8px;
		.author-infomation{
			font-size: 13px; 
			font-weight: 700;
			margin-left: 12px;
		}
		.author-rigjt-bottom{
			display: flex;
			//元素均匀分布
			justify-content: space-around;
			// justify-content: flex-start;
			margin-top: 15px;
		}
	}
	
}
.introduce{
	.introduce-tags{
		display: flex;
	}
	.introduce-category{
		display: flex;
	}
}
.comment{
	display: flex;
	margin: 5px;
	.comment-left{
		
	}
	.comment-right{
		width: 320px;
		height: 150rpx;
		display: flex;
		flex-direction: column;
		position: relative;
		.comment-rightr-infomation{
			position: absolute;
			top: 2px;
			left: 8px;
			width: 200px;
		}
		.comment-rightr-content{
			position: absolute;
			left: 8px;
			top: 25px;
		}
		.comment-right-bottom{
			width: 340px;
			position: absolute;
			bottom: 2px;
		}
	}
}
</style>
